<template>
	<div class="container">
		<navigationBar leftTitle="确认购买"></navigationBar>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight-1) + 'px;'">
			<div class="address" @click="toAddress">
				<div class="left" v-if="currentAddress && currentAddress.name">
					<div class="name">
						<image class="icon" src="/static/icons/local.png" mode=""></image>
						<span class="addr nowrap">{{currentAddress.address}}{{currentAddress.addressDetail}}</span>
					</div>
					<div class="desc">
						<span class="user">{{currentAddress.name}}</span><span>{{currentAddress.phone}}</span>
					</div>
				</div>
				<div class="left" v-else>
					<div class="name">
						<image class="icon" src="/static/icons/local.png" mode=""></image>
						<span class="addr nowrap">请新增地址</span>
					</div>
				</div>
				<image class="right" src="/static/icons/arrow-right.png" mode=""></image>
			</div>
			<div class="buy">
				<div class="buy-left">
					<!-- <image class="buy-pic" src="/static/icons/preview.png" mode=""></image> -->
					<image class="buy-pic"
						v-if="product.firstFileSuffix !== 'png' && product.firstFileSuffix !== 'jpg' && product.firstFileSuffix !== 'jpge'"
						:src="product.firstCoverPath" mode="aspectFill"></image>
					<image class="buy-pic" v-else :src="product.firstPicturePath" mode="aspectFill"></image>
					<div class="pri-wrap">
						<div class="pri-title">{{product.title}}</div>
						<div class="pri-box">
							<span class="price"><span class="price-icon">￥</span>{{product.price}}</span>
							<span class="attr" v-if="product.freeShipping">包邮</span>
						</div>
						<div class="number-change">
							<div class="btn btn-right" @click="changeSize('reduce')">
								<image src="/static/icons/reduce-num.png" mode=""></image>
							</div>
							<input type="number" v-model="formData.amount" @change="changeAmout">
							<div class="btn btn-left" @click="changeSize('add')">
								<image src="/static/icons/add-num.png" mode=""></image>
							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="remarks">
				<div class="remarks-title">定制参数</div>
				<textarea v-model="formData.customParam" :auto-height="true" placeholder="请输入参数信息"></textarea>
			</div>
			<div class="upload">
				<div class="upload-title">定制部件的图片，单张图片大小不超过2M</div>
				<div class="upload-list">
					<div class="upload-item" @click="handlerUpload()">
						<image class="icon" mode="aspectFill" :lazy-load="true" src="/static/icons/upload.png" alt="" />
						<span class="add-title">添加图片</span>
					</div>
					<div class="upload-item" v-for="(item,index) in wordList" :key="index">
						<image class="del" src="/static/icon/icon_shanchu2.png" mode="" @click="del(index)"></image>
						<image :src="item.filePath" mode=""></image>
					</div>
				</div>
			</div>
			<div class="nav-list">
				<div class="nav-item">
					<div class="left">商品金额</div>
					<div class="right"><span class="price">¥{{product.price * formData.amount | fmtTotal}}</span></div>
				</div>
				<div class="nav-item" v-if="product.receiveCoupon">
					<div class="left">优惠券</div>
					<div class="right">
						<span class="red">¥{{product.couponAmount}}</span>
						<!-- <image class="arrow" src="../../static/icons/arrow-right.png" mode=""></image> -->
					</div>
				</div>
				<div class="nav-item">
					<div class="left">运费</div>
					<div class="right" v-if="product.freeShipping">包邮</div>
					<div class="right" v-if="!product.freeShipping">￥{{product.shippingPrice}}</div>
				</div>
				<!-- <div class="nav-item">
					<div class="left">合计</div>
					<div class="right"><span class="price">¥900</span></div>
				</div> -->
			</div>
			<div class="footer-send">
				<div class="footer-text">
					<span class="text1">共{{formData.amount}}件</span>
					<span class="text2">合计</span>
					<span class="text3">¥{{ total.toFixed(2)}}</span>
				</div>
				<div class="want" @click="submit">
					立即支付
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import data from '@/js/my/buy/data.js';
	import methods from '@/js/my/buy/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	export default {
		data,
		methods,
		onLoad(e) {
			this.id = e.id
			this.formData.informationId = e.id
			this.getInformationDetail()
			// this.getPageData()
		},
		onShow() {
			this.getAllAddress()
		},
		onHide() {},
		components: {
			navigationBar
		},
		filters: {
			fmtTotal(value) {
				return value.toFixed(2)
			}
		},
		computed: {
			...mapState(['navigationBarHeight'])
		}
	};
</script>
<style>
	page,
	uni-page {
		background: rgb(250, 250, 250) !important;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/my/buy.scss';
</style>